<template>
  <div class="login">
    <el-card class="box-card">
      <div slot="header">
        {{title}}
        <!-- <el-switch
          class="loginTb"
          v-model="value"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-value="100"
          inactive-value="0"
          @change="loginTb">
        </el-switch> -->
      </div>
      <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" v-show="value === '100'">
        <el-form-item prop="userId">
          <el-input v-model="loginForm.userId" placeholder="工号">
            <template slot="prepend">
              <i class="fa fa-user" aria-hidden="true"></i>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="loginForm.password" placeholder="密码"  @keyup.enter.native="submitForm('loginForm')">
            <template slot="prepend">
              <i class="fa fa-unlock-alt" aria-hidden="true"></i>
            </template>
          </el-input>
        </el-form-item>
        <div class="login-btn">
          <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
        </div>
      </el-form>
      <el-form :model="forgetForm" status-icon :rules="forgetRules" ref="forgetForm" v-show="value === '0'">
        <el-form-item prop="userId">
          <el-input v-model="forgetForm.userId" placeholder="工号">
            <template slot="prepend">
              <i class="fa fa-user" aria-hidden="true"></i>
            </template>
          </el-input>
        </el-form-item>
        <div class="login-btn">
          <el-button type="danger" @click="forget('forgetForm')">重置密码</el-button>
        </div>
      </el-form>
    </el-card>
    <div class="login-bg"></div>
    <remote-js src="http://pv.sohu.com/cityjson?ie=utf-8"></remote-js>
  </div>
</template>

<script>
import { _debounce } from '@/public/debounce.js';
export default {
  name: 'login',
  components: {
    'remote-js': {
      render (createElement) {
        return createElement('script', {
          attrs: { type: 'text/javascript', src: this.src }
        });
      },
      props: {
        src: { type: String, required: true }
      }
    }
  },
  data () {
    return {
      title: '欢迎登录',
      value: '100',
      // 登录表单字段
      loginForm: {
        // 工号
        userId: '',
        // 密码
        password: ''
      },

      forgetForm: {
        // 工号
        userId: ''
      },
      // 登录表单验证规则
      rules: {
        userId: [{ required: true, message: '请输入工号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },

      forgetRules: {
        userId: [{ required: true, message: '请输入工号', trigger: 'blur' }]
      }
    };
  },

  methods: {
    // loginTb () {
    //   let _this = this;
    //   if (_this.value === '100') {
    //     _this.title = '欢迎登录';
    //   } else {
    //     _this.title = '忘记密码';
    //   }
    // },

    // 登录
    submitForm: _debounce(function (formName) {
      let _this = this;
      // 表单验证规则
      _this.$refs[formName].validate(valid => {
        if (valid) {
          let params = {
            userId: _this.loginForm.userId.toUpperCase(),
            pwd: _this.$md5(this.loginForm.password)
          };
          //  请求后台登录接口
          _this.$http.post('/api/login/', params).then(res => {
            let { code, token } = res;
            if (code === 0) {
              // 将token存入localStorage
              _this.$store.commit('setToken', token);
              // 存储登录用户信息
              _this.$store.commit('setInfo', res.userinfo);
              _this.$message({
                message: '登录成功！',
                type: 'success'
              });
              // eslint-disable-next-line no-undef
              localStorage.setItem('local', JSON.stringify(returnCitySN));
              // 跳转控制台
              _this.$router.push('/home');
            }
          }).catch(err => {
            // 服务器响应错误提示
            if (err === undefined) {
              _this.$message({
                message: '服务器响应异常！',
                type: 'error'
              });
              return false;
            }
          });
        }
      });
    }, 200),

    // 忘记密码
    forget: _debounce(function (formName) {
      let _this = this;
      // 表单验证规则
      _this.$refs[formName].validate(valid => {
        if (valid) {
          let params = {
            userId: _this.forgetForm.userId.toUpperCase()
          };
          //  请求后台重置密码接口
          _this.$http.post('api/forget/', params).then(res => {
            let { code, datas } = res;
            if (code === 0) {
              if (datas) {
                _this.$message({
                  message: '重置成功！初始密码：123456',
                  type: 'success'
                });
              } else {
                _this.$message({
                  message: '账户不存在或已失效！',
                  type: 'error'
                });
              }
            }
          }).catch(err => {
            // 服务器响应错误提示
            if (err === undefined) {
              _this.$message({
                message: '服务器响应异常！',
                type: 'error'
              });
              return false;
            }
          });
        }
      });
    }, 200)
  }
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
